<template>
  <v-container class="custom-container" v-touch="{
      right: () => goBack()
    }">

    <xy-header-top :title="material.materialName">
      <v-btn icon slot="left" small @click="routerBack">
        <v-icon class="white--text">iconfont-icon iconleft</v-icon>
      </v-btn>
    </xy-header-top>

    <div>
      <div id="dailyMaterialReportChart"></div>
      <div id="toolTipFormatterTemplate" style="display: none"></div>
    </div>

    <div>
      <ul class="clearfix">
        <li style="width:25%">日期</li>
        <li style="width:25%">库存</li>
        <li style="width:25%">入库</li>
        <li style="width:25%">出库</li>
      </ul>
    </div>
    <div class="scrollWrapper" ref="scrollWrapper">
      <table class="custom-table" cellspacing=0>
        <tbody>
        <tr v-for="(item,index) in materiaReportData" :key="index">
          <td style="width:25%">{{ item.startTime | timeFiller }}</td>
          <td style="width:25%">{{ item.auditQuantityTotal }}</td>
          <td style="width:25%">{{ item.auditQuantityTotal + item.traceQuantityTotal}}</td>
          <td style="width:25%">{{ item.traceQuantityTotal }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </v-container>
</template>

<script>
    import {mapState} from 'vuex';
    import echarts from 'echarts';
    import moment from 'moment';
    import BScroll from 'better-scroll';

    /**
     * $descr$
     * @Author YJX
     * @Date 2019-09-09 11:17.
     */

    export default {
        name: 'dailyMaterialInventoryReport',
        mounted() {
            if (!this.$route.query.materialName) {
                this.$message.warning("物料id为空");
                return;
            }

            this.getHeight();

            this.material = {
                materialId: this.$route.query.materialId,
                materialName: this.$route.query.materialName,
            };
            this.loadData();

            this.itemScroll = new BScroll(this.$refs.scrollWrapper, {
                startY: 0,
                startX: 0,
                scrollY: true,
                scrollX: false,
                scrollbar: false,
                click: true,
                tap: true,
                pullUpLoad: true,
                pullDownRefresh: {
                    threshold: 60, // 当下拉到超过顶部 50px 时，触发 pullingDown 事件
                    // stop: 20 // 刷新数据的过程中，回弹停留在距离顶部还有 20px 的位置
                },
            });

            this.itemScroll.on('pullingDown', () => {
                this.itemScroll.finishPullDown();
                this.itemScroll.finishPullUp();
                this.itemScroll.refresh();
            });

        },
        components: {},
        props: {},
        data() {
            return {
                chartsObj: undefined,
                materiaReportData: [], //原始数据
                defaultOPtion: {
                    title: {
                        subtext: ''
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '2%',
                        right: '6%',
                        bottom: '3%',
                        top: '12%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: undefined,
                    },
                    yAxis: [{
                        type: 'value',
                        minInterval: 1,
                    }],
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    }],
                    series: []
                },
                dataVersion: moment().valueOf(), //数据版本号
                material: {
                    materialId: null,
                    materialName: null
                },
            }
        },
        computed: {
            ...mapState([
                'userContext'
            ]),
        },
        methods: {
            /**
             * 绘图
             */
            goBack() {
                this.$router.go(-1);
            },
            drawChart() {
                let dailyMaterialReportChart = echarts.init(document.getElementById('dailyMaterialReportChart'));
                this.chartsObj = dailyMaterialReportChart;
                dailyMaterialReportChart.setOption(this.getOpt());
            },
            /**
             * 获取图表数据
             */
            getOpt: function () {
                let series = [];
                let xAxisData = [];
                let legendData = ['库存', '入库', '出库'];
                let warehousing = [];
                let traceQuantity = [];
                let auditQuantity = [];
                this.materiaReportData.forEach(item => {
                    let xAxisVal = item.startTime;
                    if (xAxisData.indexOf(xAxisVal) === -1) {
                        xAxisData.push(xAxisVal);
                    }
                    warehousing.push(item.auditQuantityTotal + item.traceQuantityTotal);
                    auditQuantity.push(item.auditQuantityTotal);
                    traceQuantity.push(item.traceQuantityTotal);
                });
                series.push({
                    type: 'line',
                    name: '库存',
                    data: auditQuantity
                });
                series.push({
                    type: 'line',
                    name: '入库',
                    data: warehousing
                });
                series.push({
                    type: 'line',
                    name: '出库',
                    data: traceQuantity
                });
                xAxisData.sort(function (a, b) {
                    return a.localeCompare(b);
                });
                return Object.assign({}, this.defaultOPtion, {
                    title: {
                        subtext: ''
                    },
                    legend: {
                        data: legendData
                    },
                    xAxis: [{
                        data: xAxisData
                    }],
                    series: series
                });
            },
            routerBack() {
                this.$router.back()
            },
            loadData() {
                if (!this.material.materialId) {
                    this.$message.error('物料Id为空!');
                    return
                }

                let params = {
                    storeId: this.userContext.store.id,
                    materialId: this.material.materialId,
                    startTime: moment().subtract(7, "days").valueOf(),
                    endTime: moment().valueOf()
                };

                this.$ajax.get("report/inventory/daily_material_inventory_report", {
                    params: params
                }).then(res => {
                    if (res.code !== 'ok') {
                        this.$message.error(res.msg);
                    } else {
                        this.materiaReportData = res.data;
                        this.dataVersion = moment().valueOf();
                    }
                })
            },
            getHeight() {
                //获取手机高度
                let clientH = document.body.clientHeight;
                document.getElementById("dailyMaterialReportChart").style.height = (clientH * 0.4+15) + 'px';
                document.getElementsByClassName("scrollWrapper")[0].style.height = (clientH * 0.4) + 'px';
            }
        },
        watch: {
            dataVersion() {
                this.drawChart();
            }
        },
        filters: {
            timeFiller(val) {
                return moment(moment(val).toDate()).format('M[月]D[日]');
            }
        },
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .custom-container {
    background: #f3f7fd;
    padding: 0;

  }

  .v-application p {
    margin-bottom: 0;
  }

  .v-application--is-ltr .v-tabs-bar.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows) > .v-slide-group__wrapper > .v-tabs-bar__content > .v-tab:first-child,
  .v-application--is-ltr .v-tabs-bar.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows) > .v-slide-group__wrapper > .v-tabs-bar__content > .v-tabs-slider-wrapper + .v-tab {
    margin-left: 0px;
  }

  .v-data-table td {
    text-align: center;
    height: unset !important;
    padding: 0;
    padding: 10px;
  }

  .v-data-table tr:nth-child(odd) {
    background: #f3f7fd !important;
  }

  .v-application--is-ltr .v-data-footer__pagination {
    margin: 0 !important;
  }

  .custom-table {
    width: 100%;
    text-align: center;
    /* border: 1px solid #ddd; */

  }

  .custom-table tbody tr:nth-child(even) {
    background: #fff !important;
  }

  .custom-table th,
  .custom-table td {
    border-top: 0;
    border-left: 0;
    padding: 8px 6px;
    font-size: 14px;
  }

  .scrollWrapper {
    /* height: 224px; */
    overflow: hidden;
    box-sizing: border-box;
    padding: 5px;
    padding-top: 0;
    /* margin-top: 10px; */
  }

  ul,
  li {
    padding: 5px 5px 0 !important;
    margin: 0 !important;


  }

  li {
    padding: 10px 5px !important;
    width: 25%;
    float: left;
    text-align: center !important;
    color: #fff;
    background: #ff9859;
    list-style-type: none !important;
    font-size: 14px;
  }

  #dailyMaterialReportChart {
    width: 100%;
    /* height: 300px; */
    padding: 60px 0 0;
  }

  #toolTipFormatterTemplate td {
    padding: 10px
  }

</style>
